<template>
  <div class="shop-div">
    <el-page-header>
      <template #breadcrumb>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ name: 'MyCeHome' }">
            首页
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'ShopList' }"
            >商品管理</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'ShopList' }"
            >分类参数</el-breadcrumb-item
          >
        </el-breadcrumb>
      </template>
      <template #content>
        <span class="text-large font-600 mr-3"> Title </span>
      </template>
    </el-page-header>

    <main>
      <el-alert title="注意:只允许为第三级分类设置相关参数" type="warning" />
      <section>
        <span>商品分类</span>
        <div class="m-4">
          <el-cascader
            :options="options"
            :props="props1"
            clearable
            placeholder="请选择"
            @change="handleCascaderChange"
          />
        </div>
      </section>

      <el-tabs type="border-card">
        <el-tab-pane label="动态参数">
          <div class="bor-div">
            <el-button type="primary" @click="addDynamicParameter"
              >添加动态参数</el-button
            >
            <table cellspacing="0" cellpadding="0">
              <thead>
                <tr>
                  <th style="width: 200px; overflow: hidden">参数</th>
                  <th style="width: 800px; overflow: hidden">规格</th>
                  <th style="width: 150px">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in arr">
                  <td>{{ item.attr_name }}</td>
                  <td>{{ item.attr_vals }}</td>
                  <td>
                    <el-button type="primary">编辑</el-button>
                    <el-button type="danger">删除</el-button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="静态属性">
          <div class="bor-div">
            <el-button type="primary" @click="addStaticParameter"
              >添加静态参数</el-button
            >
            <table cellspacing="0" cellpadding="0">
              <thead>
                <tr>
                  <th style="width: 200px; overflow: hidden">参数</th>
                  <th style="width: 800px; overflow: hidden">规格</th>
                  <th style="width: 150px">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in arr2" :key="item.id">
                  <td>{{ item.attr_name }}</td>
                  <td>{{ item.attr_vals }}</td>
                  <td>
                    <el-button type="primary">编辑</el-button>
                    <el-button type="danger">删除</el-button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </main>
    <!-- 添加动态 -->
    <UpShopData v-if="parameter.isShowUpShopData" @sss="sss" :hihi="fenId" />
    <!-- 添加静态 -->
    <UpShopData2
      v-if="parameter.isShowUpShopData2"
      @sss2="sss2"
      :hihi2="fenId"
    />
  </div>
</template>

<script setup>
import UpShopData from "../../components/UpShopData";
import UpShopData2 from "../../components/UpShopData2";
import VueCookies from "vue-cookies";
import axios from "axios";
import { Search } from "@element-plus/icons-vue";
import { ref, reactive, onMounted, watchEffect } from "vue";
// 组件
const props1 = {
  checkStrictly: true,
};
// 列表参数
let list = ref([]);
//
const options = ref([]);
onMounted(() => {
  const headers = {
    Authorization: VueCookies.get("token"),
  };
  axios.get("/api/categories", { headers }).then((res) => {
    list.value = res.data.data;
    console.log(list.value);
    for (var i = 0; i < list.value.length; i++) {
      options.value.push({
        id: list.value[i].cat_id,
        value: list.value[i].cat_id,
        label: list.value[i].cat_name,
        children: [],
      });
      for (var k = 0; k < list.value[i].children.length; k++) {
        options.value[i].children.push({
          id: list.value[i].children[k].cat_id,
          value: list.value[i].children[k].cat_id,
          label: list.value[i].children[k].cat_name,
          children: [],
        });
        if (list.value[i].children[k].children == undefined) {
          break;
        }
        for (var x = 0; x < list.value[i].children[k].children.length; x++) {
          options.value[i].children[k].children.push({
            id: list.value[i].children[k].children[x].cat_id,
            value: list.value[i].children[k].children[x].cat_id,
            label: list.value[i].children[k].children[x].cat_name,
          });
        }
      }
    }
  });
});
//
let arr = ref([]);
let arr2 = ref([]);
// 参数
let parameter = reactive({
  isShowUpShopData: false,
  isShowUpShopData2: false,
});
// 接收遮罩层的值
function sss(val) {
  parameter.isShowUpShopData = val;
}

// 接收遮罩层的值
function sss2(val) {
  parameter.isShowUpShopData2 = val;
}

// 分类id
let fenId = ref();
// 动态参数
function handleCascaderChange(value) {
  const headers = {
    Authorization: VueCookies.get("token"),
  };
  // 如果没有值就不用走下去了
  if (!value) return;
  if (value[value.length - 1]) {
    // 分类id
    fenId.value = value[value.length - 1];
    console.log(fenId.value);
    axios
      .get(`/api/categories/${fenId.value}/attributes?sel=only`, {
        headers,
      })
      .then((res) => {
        arr.value = res.data.data;
        console.log(arr.value);
      });

    axios
      .get(`/api/categories/${fenId.value}/attributes?sel=many`, {
        headers,
      })
      .then((res) => {
        arr2.value = res.data.data;
        console.log(arr2.value);
      });
  }
}

// 添加静态态参数
function addStaticParameter() {
  // 打开编辑遮罩层
  parameter.isShowUpShopData2 = true;
}
// 添加动态态参数
function addDynamicParameter() {
  // 打开编辑遮罩层
  parameter.isShowUpShopData = true;
}
// 删除

// 编辑
</script>

<style scoped>
.shop-div {
  flex-grow: 1;
  height: auto;
  padding: 20px;
}
main {
  flex-grow: 1;
  height: auto;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  position: relative;
}
.main-div-2 {
  width: 100%;
  height: auto;
  margin: 10px 0px;
}
section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 290px;
  margin: 10px 0px;
}
tr,
td,
th {
  border: 1px solid;
  padding: 10px;
}
table {
  margin-top: 20px;
  width: 100%;
  height: 50px;
  border: 1px solid;
  position: relative;
}
thead {
  width: 100%;
  height: 50px;
  border: 1px solid;
}
.bor-div {
  width: 100%;
  height: auto;
}
</style>